<template>
	<view :style="{'--color':color}">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" :title="title"></navBar>
		<!-- #endif -->
		<view class="nav" :style="{'top':newTotalHeight+'px'}">
			<u-tabs :list="list1" @click="click" :scrollable="false" :lineColor="color" :itemStyle="itemStyle"
				:current="current" :lineWidth="56" :activeStyle="activeStyle"></u-tabs>
		</view>


		<view class="viewbox auto p-bot30 p-top100">
			<block v-for="(item,index) in pageData" :key="index">
				<view class="list" @click="toUrl(`/pages/Details/Details?id=${item.id}`)">
					<image :src="$imgUrls(item.v_headimg)" class="HeadImg" @error="handleImageError(item)"
						mode="aspectFill"></image>
					<view class="content">
						<view class="row j-sb a-center">
							<text class="size32 black bold">{{item.v_name}}</text>
							<view class="authen white" v-if="item.real_name == 1">
								<view class="iconfont icon-shimingrenzheng h7 m-top4"></view>
								<text class="h7 m-left8">已实名</text>
							</view>
						</view>
						<view class="ellipsis m-top4">
							<text class="label" v-if="item.house">{{item.house}}</text>
							<text class="label" v-if="item.career">{{item.career}}</text>
							<text class="label" v-if="item.salary">{{item.salary}}</text>
						</view>
						<text class="Time">{{item.follow_time}}</text>
					</view>
				</view>
			</block>

		</view>


		<view class="noList d-flex f-column a-center auto m-top140" v-if="!pageData.length">
			<image :src="$staticImg('look.jpg')" mode="widthFix" class="rows"></image>
			<text class="color_cc size26 m-top10">暂无相关信息~</text>
		</view>



	</view>
</template>

<script>
	import {
		mapState,
		mapMutationsf
	} from 'vuex';
	import navBar from '@/components/navBar/navBar.vue'
	export default {
		data() {
			return {
				list1: [{
					name: '谁看过我',
					show_type: 3,
				}, {
					name: '我看过谁',
					show_type: 4,
				}],
				current: 0,
				itemStyle: {
					height: '36px'
				},
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					transform: 'scale(1.04)'
				},
				inactiveStyle: {
					transform: 'scale(1)'
				},
				page: 1,
				limit: 10,
				getMore: true,
				show_type: 3,
				pageData: [],
			}
		},
		onLoad(opt) {
			if (opt.type) {
				const Index = this.list1.findIndex(n => n.show_type == opt.type);
				this.current = Index;
				this.show_type = opt.type;
			}
			this.activeStyle['color'] = this.color;
			this.getMembers();
		},
		methods: {
			getMembers() {
				this.$http.get({
					url: '/WeddingApi/getMembers',
					data: {
						page: this.page,
						limit: this.limit,
						show_type: this.show_type
					}
				}).then(res => {
					if (res.code != 200) return;
					const result = res.data.list || [];
					this.page == 1 ? this.pageData = result : this.pageData = this.pageData.concat(result);
					if (result.length < this.limit) this.getMore = false;
				})
			},
			click(e) {
				this.current = e.index;
				this.show_type = e.show_type;
				this.page = 1;
				this.getMore = true;
				this.getMembers();
			},
			handleImageError(item) {
				const Default = this.$pop.RandomAvatar();
				const Index = this.pageData.findIndex(n => n.id == item.id);
				this.pageData[Index].v_headimg = Default
			}
		},
		computed: {
			...mapState(['vid', 'color', 'title', 'totalHeight']),
			newTotalHeight() {
				// #ifdef MP-WEIXIN
				return this.totalHeight
				// #endif
				// #ifdef H5
				return 0
				// #endif
			}
		},
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.getMembers();
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.nav {
		width: 100%;
		padding: 10rpx 50rpx 0 50rpx;
		height: 88rpx;
		background-color: $pageBg;
		position: fixed;
		left: 0;
		z-index: 100;
	}

	.list {
		width: 100%;
		background-color: #ffffff;
		padding: 24rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.HeadImg {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.authen {
		display: flex;
		align-items: center;
		background-color: #52c9eb;
		border-radius: 20rpx;
		padding: 2rpx 8rpx;
	}

	.label {
		padding: 0 10rpx;
		position: relative;
		color: #333333;
		font-size: 24rpx;
	}

	.label:first-child {
		padding: 0 10rpx 0 0;
	}

	.label::after {
		content: '';
		width: 1rpx;
		height: 24rpx;
		background-color: #ccc;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.label:last-of-type::after {
		display: none;
	}

	.Time {
		color: #8d8d8d;
		font-size: 22rpx;
		margin-top: 8rpx;
	}

	.cancel {
		width: 140rpx;
		height: 50rpx;
		background-color: var(--color);
		border-radius: 25rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.noList {
		width: 540rpx;

	}
</style>